<template>

        <wxc-tab-bar :tab-titles="tabTitles"
                     :tab-styles="tabStyles"
                     title-type="icon"
                     @wxcTabBarCurrentTabSelected="wxcTabBarCurrentTabSelected">
            <!--The first page content-->
            <div class="item-container" :style="contentStyle">
                <header-bar title="首页"></header-bar>
            </div>

            <!--The second page content-->
            <div class="item-container" :style="contentStyle">
                <header-bar title="贴别推荐"></header-bar>
            </div>

            <!-- The third page content-->
            <div class="item-container" :style="contentStyle">
                <header-bar title="消息中心"></header-bar>
            </div>

            <!-- The fourth page content-->
            <div class="item-container" :style="contentStyle">
                <header-bar title="我的主页"></header-bar>
            </div>
        </wxc-tab-bar>


</template>

<script>
    import { WxcTabBar, Utils } from 'weex-ui';
    import headerBar from './header.vue'
    // https://github.com/alibaba/weex-ui/blob/master/example/tab-bar/config.js
    import Config from './config'

    export default {
        components: { WxcTabBar, headerBar },
        data: () => ({
            tabTitles: Config.tabTitles,
            tabStyles: Config.tabStyles
        }),
        created () {
            const tabPageHeight = Utils.env.getPageHeight();
            // If the page doesn't have a navigation bar
            // const tabPageHeight = env.deviceHeight / env.deviceWidth * 750;
            const { tabStyles } = this;
            this.contentStyle = { height: (tabPageHeight - tabStyles.height) + 'px' };
        },
        methods: {
            wxcTabBarCurrentTabSelected (e) {
                const index = e.page;
                // console.log(index);
            }
        }
    };
</script>

<style scoped>
    .item-container {
        width: 750px;
        background-color: #f2f3f4;
        /*align-items: center;*/
        /*justify-content: center;*/
    }
</style>